<template>
  <el-container>
    <!-- <el-row style="font-size:20px; margin: 1% auto;">接件类型</el-row> -->

    <el-form :model="temp_bussi" ref="temp_bussi" :inline="true" style="text-align:center;margin:1%"
      label-width="200px">
      <el-row style="margin: 1% auto;font-size:20px">待办查询</el-row>
      <el-row :gutter="10" style=" margin: 1% auto;">
        <el-form-item label="业务编号" prop="applyCode">
          <el-input v-model="temp_bussi.applyCode" placeholder="业务编号"></el-input>
        </el-form-item>
        <el-form-item label="申请人" prop="name">
          <el-input v-model="temp_bussi.name" placeholder="申请人"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idcard">
          <el-input v-model="temp_bussi.idcard" placeholder="证件号"></el-input>
        </el-form-item>
        <el-form-item label="乡镇街道" v-if="townState">
          <el-select v-model="temp_bussi.townCode" placeholder="请选择" style="width:100%" @change="townChange">
            <el-option label="请选择乡镇街道" value></el-option>
            <el-option v-for="(item) in temp_bussi.townList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="村组社区" prop="options">
          <el-select v-model="temp_bussi.villageCode" placeholder="请选择">
            <el-option label="请选择村组社区" value></el-option>
            <el-option v-for="item in temp_bussi.villageList" :key="item.code" :label="item.name" :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('temp_bussi')">搜索</el-button>
          <el-button @click="resetForm('temp_bussi')">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row style="margin: 1% auto;font-size:20px;text-align:center">待办列表</el-row>

    <el-card style="margin-top:10px;width:100%">
      <el-table v-loading :data="tempTableData.data" style="width: 100%" @selection-change="handleSelectionChange"
        @row-dblclick="createPro">
        <el-table-column prop="applyCode" width="100" label="业务编号" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="name" label="申请人" width="100" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="idCard" label="证件号" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="townName" label="乡镇街道" align="center" min-width="12%" v-if="townState">
        </el-table-column>
        <el-table-column prop="villageName" label="村组社区" align="center" min-width="12%"></el-table-column>
        <el-table-column prop="state" label="状态" :formatter="showChangeData" align="center" min-width="12%">
        </el-table-column>
        <el-table-column prop="operation" label="操作" align="center" min-width="12%">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" type="primary">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-footer style="margin-top:10px width:100%">
      <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
        @next-click="nextPage" :current-page="tempTableData.currentPage" :page-sizes="[5, 10, 15, 20]"
        :page-size="tempTableData.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="tempTableData.total"></el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import {
    //getBussiListApi,
    getBnBasicInfoListApi,
    deleteApplyApi
  } from "@/api/applyApi";
  import {
    getChildrenAddress
  } from "@/api/addressDictionary";
  import store from "@/vuex/store";
  export default {
    data() {
      return {
        // bussi: {
        //   name: "",
        //   type: "",
        //   data: [],
        //   currentPage: 1,
        //   pageSize: 5,
        //   total: 0
        // },
        townState: false,
        type: "", //业务类型
        currentCode: store.getters.currentCode,
        temp_bussi: {
          //id: "",
          applyCode: "",
          region: "",
          idcard: "",
          address: "",
          name: "",
          townList: [{
            name: "",
            code: ""
          }],
          villageList: [{
            name: "",
            code: ""
          }],
          townCode: "",
          villageCode: "",
          currentPage: 1,
          pageSize: 5,
          total: 0
        },
        tableData: {
          data: [{
            bussi_name: "",
            type: "",
            description: ""
          }]
          // currentPage: 1,
          // pageSize: 5,
          // total: 0,
          // type: 0
        },
        tempTableData: {
          //表格data
          data: [{
            name: "",
            id: "",
            idcard: "",
            address: "",
            czsq: "",
            state: ""
          }],
          currentPage: 1,
          pageSize: 5,
          total: 0,
          type: 0
        }
      };
    },
    created: function () {
      this.showTown();
      //this.getBussiList();
      this.getBnBasicInfoList();
      getChildrenAddress(this.currentCode).then(townList => {
        if (this.currentCode.length > 9) {
          this.temp_bussi.townList = townList.data.data;
        } else {
          this.temp_bussi.villageList = townList.data.data;
        }
      });
    },
    methods: {
      //改变乡镇
      townChange(index) {
        if (this.temp_bussi.townCode) {
          getChildrenAddress(this.temp_bussi.townCode).then(villageList => {
            this.temp_bussi.villageList = villageList.data.data;
          });
        }
      },
      handleEdit(index, row) {
        this.createPro(row, index);
      },
      addNewPro(index, row) {
        //默认设置为0，后台做处理
        row = {
          id: 0
        };
        //row.active = 0 // console.log(row);
        row.active = 0;
        row.townList = this.temp_bussi.townList;
        // row.villageList = this.temp_bussi.villageList;
        row.villageCode = this.villageCode;
        row.type = this.type;
        if (this.type != "" && this.type != null) {
          this.$router.push({
            path: "./putBussi",
            query: row
          });
        } else {
          this.$message({
            showClose: true,
            message: "请选择业务类型",
            type: "error"
          });
        }

        // this.createPro(row, index);
      },
      //删除
      deleteApply(index, row) {
        deleteApplyApi(row.id)
          .then(response => {
            this.$message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
            //页面刷新
            //this.getBussiList();
            this.getBnBasicInfoList();
          })
          .catch(error => {
            // console.log(error);
            this.$message({
              showClose: true,
              message: error,
              type: "error"
            });
          });
      },
      //数据控制
      // getBussiList() {
      //   this.tableLoding = true;
      //   getBussiListApi(this.bussiList)
      //     .then(response => {
      //       this.tableData.data = response.data.data.items;
      //       this.tableLoding = false;
      //     })
      //     .catch(error => {
      //       this.$message({
      //         showClose: true,
      //         message: error,
      //         type: "error"
      //       });
      //       this.tableLoding = false;
      //     });
      // },
      getBnBasicInfoList() {
        this.tableLoding = true;
        getBnBasicInfoListApi(this.temp_bussi)
          .then(response => {
            this.tempTableData.data = response.data.data.items;
            this.tempTableData.total = response.data.data.total;
            this.tableLoding = false;
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: error,
              type: "error"
            });
            this.tableLoding = false;
          });
      },
      //提交搜索
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            getBnBasicInfoListApi(this.temp_bussi)
              .then(response => {
                this.tempTableData.data = response.data.data.items;
                this.tempTableData.total = response.data.data.total;
                this.tableLoding = false;
                this.$message({
                  showClose: true,
                  message: "搜索成功",
                  type: "success"
                });
                this.resetForm(formName);
              })
              .catch(error => {
                this.$message({
                  showClose: true,
                  message: error.data.respondMessage,
                  type: "error"
                });
              });
          } else {
            return false;
          }
        });
      },
      // 清空表单选项
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      createPro(row) {
        // console.log(row);
        row.active = 0;
        row.townList = this.temp_bussi.townList;
        getChildrenAddress(row.townCode).then(villageList => {
          row.villageList = villageList.data.data;
          this.$router.push({
            path: "./putBussi",
            query: row
          });
        });
      },
      changePageSize(val) {
        //this.tableData.pageSize = val;
        this.temp_bussi.pageSize = val;
        this.getBnBasicInfoList();
      },
      changeCurrentPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      prevPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      nextPage(val) {
        this.temp_bussi.currentPage = val;
        this.getBnBasicInfoList();
      },
      handleSelectionChange(val) {
        this.changeRow = val;
      },
      selectable(row, index) {
        if (row.show == 0) {
          return false;
        } else {
          return true;
        }
      },

      //表格的序号
      indexMethod(index) {
        return index + 1;
      },

      //格式化业务名称
      formatName: function (row, column) {
        return row.type == "1" ?
          "新建" :
          row.type == "2" ?
          "扩建" :
          row.type == "3" ?
          "迁建" :
          row.type == "4" ?
          "改建" :
          row.type == "5" ?
          "加层" :
          row.type == "6" ?
          "改扩建" :
          "未知";
      },
      //状态
      showChangeData: function (row, column) {
        return row.state == "1" ?
          "收件" :
          row.state == "2" ?
          "资料审查" :
          row.state == "3" ?
          "规划许可" :
          row.state == "4" ?
          "施工管理" :
          row.state == "5" ?
          "竣工验收" :
          row.state == "6" ?
          "归档" :
          "未知";
      }, //控制显示乡镇街道显示状态
      showTown() {
        if (this.currentCode.length > 9) {
          this.townState = true;
        } else {
          this.townState = false;
        }
      }
    }
  };
</script>

<style>
  .container {
    font-size: 20px;
  }
</style>